<template>
  <el-card style="height: 780px;">
    <template #header>
        <div class="dispyHeader">
        <el-form  :inline="true"
        ref="from"
        :model="ruleForm"
        :rules="rules"
        >
            <el-form-item label="名称" prop="name">
                <el-input style="width: 250px;" placeholder="请输入名称"  v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
                <el-input style="width: 250px" placeholder="请输入联系方式" v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :icon="Search" @click="selcetList()">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 新增按钮 -->
        <el-button type="primary" style="width: 100px;height: 40px"  @click="addButton">新增</el-button>
    </div>
    </template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="名称"/>
        <el-table-column prop="username" label="用户名"/>
        <el-table-column prop="age" label="年龄"/>
        <el-table-column prop="address" label="地址"/>
        <el-table-column prop="phone" label="联系方式"/>
        <el-table-column prop="sex" label="性别" />
        <el-table-column style="width: 100px;"   #default="{row,$index}">
            <el-button type="primary" @click="alterButton(row,$index)">修改</el-button>
            <el-button type="danger" @click="deleteButton(row)">删除</el-button>
        </el-table-column>
    </el-table>
    <template #footer>
        <el-pagination
        v-model:page-size="ruleForm.pageSize"
        v-model:current-page="ruleForm.pageSum"
         background 
         layout="prev, pager, next" 
         :total="100" />
    </template>
  </el-card>
  <!-- 插槽位置 -->
<index-button ref="dialog" @success="onesuccess">

</index-button>
</template>

<script setup>
import {ref} from 'vue'
import {bookIndexList,bookSelectIndexList,bookDelete} from '@/api/bookIndex.js'
import {Search} from '@element-plus/icons-vue'
import indexButton from '@/views/index/public/indexButton.vue'
import { onMounted } from 'vue';
const tableData=ref([])
const getListIndexData=async ()=>{
    const listData=await bookIndexList().then(res=>res.data)
    // console.log(to)
    tableData.value=listData

}
getListIndexData()
const from=ref('')
const ruleForm=ref({
    pageSum:1,  
    pageSize:5,
    name:'',
    phone:'',

})
// 数据校验
const rules={
    name:[
    ],
    phone:[
    { min: 1, max: 100, message: '只能在 3 到 100 之间', trigger: 'blur' },
    ]
}
// 搜索按钮
const selcetList=async()=>{
    await from.value.validate()
    const res=await bookSelectIndexList(ruleForm.value)
    // console.log(res)
    tableData.value=res.data.list
}
// 打开按钮
const dialog=ref()
const addButton=()=>{
    dialog.value.open({})
}
// 修改按钮
const alterButton=(row)=>{
    dialog.value.open({row})
}
// 删除按钮
const deleteButton=async(row)=>{
    await bookDelete(row.id)
    const res=await bookSelectIndexList(ruleForm.value)
    tableData.value=res.data.list
}
// 钩子
onMounted(async() => {
      // 在组件挂载到DOM之后执行的操作
    await from.value.validate()
    const res=await bookSelectIndexList(ruleForm.value)
    tableData.value=res.data.list
    })
const onesuccess=async()=>{
    const res=await bookSelectIndexList(ruleForm.value)
    tableData.value=res.data.list
}
</script>

<style>
.dispyHeader{
    display: flex;
    justify-content: space-between;
}
</style>